<template>
	<div class="app_login" :style="{ backgroundImage: `url(${settings.login_bg_src}` }">
		<el-row justify="center" align="middle" class="login_main">
			<el-col :span="24">
				<div class="login_main_card">
					<el-row>
						<el-col :xs="0" :sm="0" :md="0" :lg="12" :xl="12" class="login_main_col_left">
							<div class="login_main_col_left_container">
								<div style="width: 100%">
									<el-page-header @back="$route.go(-1)"></el-page-header>
								</div>
								<div style="height: 95%; display: flex; align-items: center; justify-content: center">
									<transition name="el-fade-in-linear">
										<h1 v-if="show">立即注册</h1>
									</transition>
								</div>
							</div>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="login_main_col_right">
							<div class="login_main_col_right_container">
								<div class="login_main_col_right_container_form">
									<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm" :size="formSize" status-icon>
										<el-form-item label="账户名称" prop="username">
											<el-input v-model="ruleForm.username" />
										</el-form-item>

										<el-form-item label="用户昵称" prop="nickname">
											<el-input v-model="ruleForm.nickname" />
										</el-form-item>

										<el-form-item label="手机号码" prop="phone">
											<el-input v-model="ruleForm.phone" />
										</el-form-item>

										<el-form-item label="个人邮箱" prop="email">
											<el-input v-model="ruleForm.email" />
										</el-form-item>

										<el-form-item label="新的密码" prop="password">
											<el-input v-model="ruleForm.password" type="password" autocomplete="off" />
										</el-form-item>
										<el-form-item label="确认密码" prop="checkPass">
											<el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
										</el-form-item>

										<el-form-item label="验证码" prop="code">
											<el-row :gutter="10">
												<el-col :span="12">
													<el-input v-model="ruleForm.code" placeholder="请输入邮箱验证码" />
												</el-col>
												<el-col :span="12">
													<el-button type="warning" @click="handleSendCode" :disabled="isSending">
														{{ isSending ? `${countdown}秒后重试` : '获取验证码' }}
													</el-button>
												</el-col>
											</el-row>
										</el-form-item>
										<div style="display: flex; justify-content: center">
											<el-button type="primary" @click="submitForm(ruleFormRef)"> 确认注册 </el-button>
											<el-button @click="resetForm(ruleFormRef)"> 重置 </el-button>
											<el-button @click="backForm"> 返回 </el-button>
										</div>
									</el-form>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>

		<footer class="footer">
			{{ settings.copyright }}
		</footer>
	</div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import useSystemStore from '@/stores/system'
import pinia from '@/stores/store'
import request from '@/utils/request'
import { ElMessage, ElNotification } from 'element-plus'
import router from '@/router'
import settings from '@/utils/settings'

const $route = router
const systemStore = useSystemStore(pinia)
const userInfo = systemStore.userInfo
const captchaImg = ref('')
const show = ref(false)
const isSending = ref(false)
const countdown = ref(60)

setTimeout(() => (show.value = true), 500)
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
	avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
	nickname: undefined,
	username: undefined,
	phone: undefined,
	email: undefined,
	content: undefined,
	password: undefined,
	checkPass: undefined
})
// 校验新密码
const validatePass = (rule, value, callback) => {
	if (value === '') {
		callback(new Error('请输入密码'))
	} else if (value.toString().length < 5 || value.toString().length > 10) {
		return callback(new Error('密码长度在5到10位之间'))
	} else {
		if (ruleForm.checkPass !== '') {
			if (!ruleFormRef.value) {
				return
			}
			ruleFormRef.value.validateField('checkPass', () => null)
		}
		callback()
	}
}

const handleSendCode = async () => {
	if (!ruleForm.email) {
		ElMessage.error('请输入邮箱地址')
		return
	}

	try {
		await request.get(`/auth/email/register/${ruleForm.email}`)
		ElMessage.success('验证码已发送')
		isSending.value = true
		// 倒计时处理
		const timer = setInterval(() => {
			countdown.value--
			if (countdown.value <= 0) {
				clearInterval(timer)
				isSending.value = false
				countdown.value = 60
			}
		}, 1000)
	} catch (error) {
		ElMessage.error(error.message || '发送失败')
	}
}

// 确认密码
const validatePass2 = (rule, value, callback) => {
	if (value === '') {
		callback(new Error('请确认密码'))
	} else if (value.toString().length < 5 || value.toString().length > 10) {
		return callback(new Error('密码长度在5到10位之间'))
	} else if (!ruleForm.password) {
		return ruleFormRef.value.validateField('password', () => null)
	} else if (value !== ruleForm.password) {
		callback(new Error('两次密码输入不一致'))
	} else {
		callback()
	}
}
const rules = reactive({
	username: [
		{ required: true, message: '输入账户名', trigger: 'blur' },
		{ min: 5, max: 10, message: '长度在5到10位之间', trigger: 'blur' }
	],
	nickname: [
		{ required: true, message: '输入用户昵称', trigger: 'blur' },
		{ min: 2, max: 5, message: '长度在2到5位之间', trigger: 'blur' }
	],
	phone: [
		{ required: true, message: '请输入手机号码', trigger: 'blur' },
		{
			pattern: /^1[3456789]\d{9}$/,
			message: '手机号格式不正确',
			trigger: 'blur'
		}
	],
	email: [
		{ required: true, message: '请输入邮箱号', trigger: 'blur' },
		{
			type: 'email',
			message: '邮箱地址格式不正确',
			trigger: ['blur']
		}
	],
	code: [
		{ required: true, message: '请输入验证码', trigger: 'blur' },
		{ min: 5, max: 5, message: '验证码为5位数字', trigger: 'blur' }
	],
	password: [
		{
			required: true,
			message: '请输入密码',
			validator: validatePass,
			trigger: 'blur'
		}
	],
	checkPass: [
		{
			required: true,
			message: '请确认密码',
			validator: validatePass2,
			trigger: 'blur'
		}
	]
})

const submitForm = async formEl => {
	if (!formEl) {
		return
	}
	formEl.validate(async (valid, fields) => {
		if (valid) {
			try {
				await request.post('/auth/register', ruleForm)

				ElNotification({
					title: '注册成功',
					message: `${ruleForm.nickname} 欢迎您!`,
					type: 'success'
				})

				$route.replace('/login')
			} catch (error) {
				console.log(error)
			}
		}
	})
}

const backForm = async () => {
	await $route.replace('/login')
}

//重置方法
const resetForm = formEl => {
	if (!formEl) {
		return
	}
	formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
	value: `${idx + 1}`,
	label: `${idx + 1}`
}))
const handleAvatarSuccess = (response, uploadFile) => {
	ruleForm.avatar = URL.createObjectURL(uploadFile.raw)
}
</script>
<script>
export default {
	name: 'Register'
}
</script>

<style scoped lang="scss">
.app_login {
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
	/* 页脚样式，带透明灰色背景 */
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: rgba(128, 128, 128, 0.5); /* 半透明灰色背景 */
		text-align: center;
		padding: 1rem;
		color: #ffffff;
		font-size: 0.9rem;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	}

	.login_main {
		height: 100vh;
		max-width: 50vw;
		min-width: 375px;
		margin: 0 auto;

		.login_main_card {
			background-color: #ffffff; /* 设置背景颜色为白色 */
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 设置阴影 */
			border: none; /* 去掉边框 */
			border-radius: 5px; /* 可选：圆角，让卡片更有层次感 */
			overflow: hidden; /* 确保内容不会超出圆角的边界 */
		}

		.login_main_col_left {
			background-image: url('/public/ikon.jpg');
			background-repeat: no-repeat;
			background-size: cover;

			.login_main_col_left_container {
				height: 60vh;
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				h1 {
					font-size: 60px;
					font-family: 思源黑体;
					text-align: center;
					color: white;
				}
			}
		}

		.login_main_col_right {
			.login_main_col_right_container {
				height: 60vh;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.login_main_col_right_container_form {
					width: 100%;
					padding: 0 30px;
				}
			}
		}
	}
}
</style>
